<template>
	<cl-page statusBarBackground="#fff" background-color="#fff" :fullscreen="true">
		<cl-sticky>
			<cl-topbar
				:border="false"
				background-color="#fff"
				color="#333"
				:title="t('bill.withdraw.result')"
				:moreTit="t('bill.withdraw.finsh')"
				moreTitColor="#0C81F7"
				@more="router.home()"
			/>
		</cl-sticky>
		<view class="page-info animate__animated animate__fadeIn">
			<view class="plan flex">
				<view class="flex flex-center flex-column">
					<view class="to"></view>
					<image class="icon" src="/static/images/time.png" mode="aspectFill"></image>
					<view class="tt"></view>
				</view>

				<view class="flex flex-column ml70">
					<view class="t2">{{ $t("bill.withdraw.plan1") }}</view>
					<view class="mt100">
						<view class="t1">{{ $t("bill.withdraw.plan2") }}</view>
						<view class="t3">{{ $t("bill.withdraw.plan3") }}</view>
					</view>
					<view class="t2 mt100">{{ $t("bill.withdraw.plan4") }}</view>
				</view>
				<view class="border1"></view>
				<view class="border2"></view>
			</view>
			<view class="list">
				<view class="flex flex-between align-center">
					<view class="left">{{ $t("bill.withdraw.money") }}</view>
					<view class="right">¥5000.00</view>
				</view>
				<view class="flex flex-between align-center mt30">
					<view class="left">{{ $t("bill.withdraw.sxf") }}</view>
					<view class="right">¥0.50</view>
				</view>
				<view class="flex flex-between align-center mt30">
					<view class="left">{{ $t("bill.withdraw.bank") }}</view>
					<view class="right">{{ $t("bill.withdraw.card") }} 5969</view>
				</view>
			</view>
		</view>
	</cl-page>
</template>

<script lang="ts" setup>
import { onReady } from "@dcloudio/uni-app";
import { useApp, useCool, useStore } from "/@/cool";
import { useUi } from "/$/cool-ui";
import { useI18n } from "vue-i18n";
const { locale } = useI18n();
const { t } = useI18n();
const { router, upload } = useCool();
const { user } = useStore();
const ui = useUi();
const app = useApp();
</script>

<style lang="scss" scoped>
.page-info {
	.plan {
		padding: 100rpx 70rpx;
		position: relative;
		.to {
			width: 30rpx;
			height: 30rpx;
			background: #55cf35;
			border-radius: 50%;
		}
		.tt {
			width: 30rpx;
			height: 30rpx;
			background: #dddddd;
			border-radius: 50%;
		}
		.t1 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
		}
		.t2 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
		}
		.t3 {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 24rpx;
			color: #999999;
		}
		.icon {
			width: 60rpx;
			height: 60rpx;
			margin: 110rpx 0;
			position: relative;
			z-index: 3;
		}
		.border1 {
			width: 4rpx;
			height: 150rpx;
			background: #55cf35;
			position: absolute;
			left: 98rpx;
			top: 130rpx;
		}
		.border2 {
			width: 4rpx;
			height: 150rpx;
			background: #dddddd;
			position: absolute;
			left: 98rpx;
			bottom: 130rpx;
		}
	}
	.list {
		padding: 30rpx;
		box-sizing: border-box;
		.left {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
		}
		.right {
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
			text-align: right;
		}
	}
}
</style>
